<template>
	<view class="padding-top-sm text-black3 bgContent">
		<view class="addr radius-8" @tap="selectAddress">
			<view class="icon">
				<image src="../../static/order/addricon.png" mode=""></image>
			</view>
			<view class="right" v-if="addressInfo.receiveId">
				<view class="tel-name">
					<view class="name">{{addressInfo.receiveName}}</view>
					<view class="tel">{{$dealTel(addressInfo.receiveMobile)}}</view>
				</view>
				<view class="addres margin-top-xs">
					{{addressInfo.receiveProvince}}{{addressInfo.receiveCity || ''}}{{addressInfo.receiveArea || ''}}{{addressInfo.receiveAddress}}
				</view>
			</view>
			<view class="right font-15" v-else>点击添加收货地址</view>
			<u-icon name="arrow-right" color="#000000" size="20" class="m-t-4"></u-icon>
		</view>
		<!-- 购买商品列表 -->
		<view class="buy-list radius-8">
			<view class="row">
				<view class="goods-info">
					<view class="img">
						<image :src="detail.mainImageUrl"></image>
					</view>
					<view class="flex flex-direction justify-between margin-left-sm w-100">
						<view class="text-cut2 font-16 text-bold">{{detail.productName}}</view>
						<view class="flex justify-between align-center text-grey font-13 margin-tb-sm">
							<view>{{ detail.specValue }}</view>
						</view>
						<view class="flex justify-between align-center text-grey font-13">
							<view class="font-15 price">¥ {{ detail.productPrice }}</view>
							<view>
								<u-number-box v-model="num" @change="numChange" :min="1"></u-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="radius-8 flex align-center margin-top">
					<view class="font-15">订单备注</view>
					<textarea v-model="remark" placeholder="请输入备注信息" class="flex-grow margin-left font-13" style="padding: 10rpx 0;" maxlength="100" auto-height="20" />
				</view>
			</view>
		</view>
		<!-- 明细 -->
		<view class="detail radius-8 font-15">
			<view class="row">
				<view>商品总金额:</view>
				<view>¥ {{ detail.productPrice || 0 }}</view>
			</view>
			<view class="row m-t-10" v-if="!chooeseBool || deduction == 0">
				<view class="nominal">可获得积分:</view>
				<view class="content price">{{ detail.giftValue || 0 }} 积分</view>
			</view>
			<view class="row m-t-10" v-if="chooeseBool && deduction != 0">
				<view class="nominal">可获得积分:</view>
				<view class="content price">无赠送</view>
			</view>
		</view>
	
		<view class="bg-white radius-8 margin-lr padding" v-if="methodsDataBool.length != 0 && deduction != 0">
			<view>
				<text class="font-15">积分抵扣</text>
				<text class="font-12 color-r">(商品最多抵扣¥{{ deduction }})</text>
			</view>
			<radio-group @change="checkboxChange">
				<view class="flex justify-between align-center margin-top-lg font-15" v-for="(item,index) in methodsData" :key="index" v-if="item.money != 0">
					<view class="flex align-center">
						<view>
							<image :src="item.payIcon" mode="widthFix" class="img-48"></image>
						</view>
						<view class="text-bold margin-left-sm">{{item.payName}}</view>
						<view class="text-gray font-12">（剩余:{{ item.money }}）</view>
					</view>
					<view>
						<label>
							<radio activeBackgroundColor="#e60000" iconColor="#ffffff" activeBorderColor="#ffffff" :value="item.payId+''" :checked="item.isActive" />
						</label>
					</view>
				</view>
			</radio-group>
		</view>

		<view style="height: 230rpx; background: #f2f2f2;width: 100%;"></view>

		<view class="footer">
			<view>
				<view class="flex align-center">
					<text class="font-15 text-bold">支付：</text>
					<text class="text-theme font-20 text-bold">¥ {{ totalNum }}</text>
				</view>
			</view>
			<view class="btn" @tap="toPay">去支付</view>
		</view>

	</view>
</template>

<script>
	import {orderCreate,orderMethods} from '@/common/api/order.js'
	import { receiveList } from '@/common/api/customer.js'
	import { Debounce } from "@/common/utils/tools.js";
	export default {
		data() {
			return {
				productId: '',
				detail: {},
				remark: '',
				addressInfo: {},
				areaId: '',
				num: 1,
				methodsDataBool: [],//可用支付方式
				methodsData: [],//支付方式
				chooeseMethods: null,//选择的支付方式
				totalNum: 0,
				deduction: 0,//最大抵扣金额
				chooeseBool: false,//判断是否选择了购物积分抵扣
			}
		},
		onLoad(options) {
			this.getAddressList()
			uni.$on('selectAddressInfo', (res)=> {
				this.addressInfo = res
			})
			this.detail = uni.getStorageSync('skuData');
			this.num = options.num;
			this.loadMethodsData();
			// 最大抵扣金额计算
			this.deduction = ((Number(this.detail.productPrice) - Number(this.detail.costPrice)) * 0.9 * Number(this.num)).toFixed(2)
			// 计算底部总金额
			this.totalNum  = (this.detail.productPrice * this.num).toFixed(2);
		},
		onUnload() {
			uni.$off('selectAddressInfo')
		},
		methods: {
			// 获取支付方式
			loadMethodsData() {
				let parmas = {
					productArea: this.detail.productArea
				}
				orderMethods(parmas).then(res => {
					if(res.code == 200){
						res.data.map(item => {
							item.isActive = false
						})
						let arr = res.data.filter(item => item.money > 0)
						this.methodsDataBool = arr
						this.methodsData = res.data || []
					}
				})
			},
			//更改数量
			numChange(val) {
				this.num = val.value
				let bool,total = 0;
				this.methodsData.map(item => {
					if(item.isActive) {
						bool = true
						total = item.money
					}
				})
				// 如果勾选了积分抵扣
				if(bool) {
					this.deduction = ((Number(this.detail.productPrice) - Number(this.detail.costPrice)) * 0.9 * Number(this.num)).toFixed(2)
					if(total >= this.deduction) {
						this.totalNum  = (this.detail.productPrice * this.num).toFixed(2) - this.deduction;
					}else{
						this.totalNum  = (this.detail.productPrice * this.num).toFixed(2) - total;
					}
				}else{
					// 如果没有勾选积分抵扣
					this.deduction = ((Number(this.detail.productPrice) - Number(this.detail.costPrice)) * 0.9 * Number(this.num)).toFixed(2)
					this.totalNum  = (this.detail.productPrice * this.num).toFixed(2);
				}
			},
			// 勾选积分之后
			checkboxChange(e) {
				this.chooeseMethods = e.detail.value
				this.methodsData.map(item => {
					if(this.chooeseMethods == item.payId){
						item.isActive = true
					}else{
						item.isActive = false
					}
				})
				this.calcTotal()
			},
			// 计算总支付金额
			calcTotal() {
				let total = 0
				this.methodsData.map(i => {
					if(i.payId == this.chooeseMethods) {
						total = i.money
					}
				})
				if(total >= this.deduction) {
					this.totalNum = ((this.detail.productPrice * this.num).toFixed(2) - this.deduction).toFixed(2)
				} else {
					this.totalNum = ((this.detail.productPrice * this.num).toFixed(2) - total).toFixed(2)
				}
				this.chooeseBool = true
			},
			// 提交订单
			toPay:Debounce(function () {
				let that = this
				if(!that.addressInfo.receiveId) {
					return that.$msg('请添加收货地址')
				}
				uni.showLoading({
					title: '订单提交中',
					mask: true
				})
				let parmas = {
					skuId: that.detail.id,
					receiveId: that.addressInfo.receiveId,
					remark: that.remark,
					buyCount: that.num
				}
				if(this.chooeseMethods){
					let systemPaymentSecond = [];
					this.methodsData.forEach(i => {
						if(i.payId == this.chooeseMethods) {
							let obj = {
								'walletKey' : i.payCode
							}
							systemPaymentSecond.push(obj)
						}
					})
					parmas.secondMaps  = {
						'systemPaymentSecond': systemPaymentSecond
					}
					uni.setStorageSync('totalNum',this.totalNum)
				}
				orderCreate(parmas).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						that.toPage(res)
					} else {
						that.$msg(res.msg)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},800),
			// 跳转支付页面
			toPage(res){
				uni.navigateTo({
					url: '/pages/order/payOrder?orderId=' + res.data+'&productId='+this.detail.productId
				})
			},
			//选择地址
			selectAddress() {
				uni.navigateTo({
					url: '/pages/my/address/addressList'
				})
			},
			//地址列表
			getAddressList() {
				receiveList().then(res => {
					if(res.data.length > 0) {
						res.data.filter(item => {
							if(item.defaultFlag) {
								this.addressInfo = item
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bgContent {
		background-color: #f2f2f2 !important;
		min-height: 100vh;
	}
	::v-deep uni-checkbox .uni-checkbox-input {
		border-radius: 50rpx !important;
	}
	.addr {
		width: 92%;
		padding: 30rpx 4%;
		margin: 0upx auto 20upx auto;
		display: flex;
		align-items: center;
		background-color: #fff;

		.icon {
			width: 80upx;
			height: 80upx;
			display: flex;
			align-items: center;
			margin-right: 24upx;

			image {
				width: 60upx;
				height: 60upx;
			}
		}

		.tel-name {
			width: 100%;
			display: flex;
			font-size: 30rpx;
			font-weight: bold;

			.tel {
				margin-left: 40upx;
			}
		}

		.addres {
			width: 100%;
			font-size: 28rpx;
			color: #999;
		}

		.right {
			width: 77%;
		}
	}

	.price {
		color: #f06c7a;
	}
	.buy-list {
		padding: 30rpx;
		margin: 20rpx 30rpx;
		background-color: #fff;

		.row {
			.goods-info {
				width: 100%;
				display: flex;

				.img {
					width: 128rpx;
					height: 128rpx;
					border-radius: 8rpx;
					overflow: hidden;
					flex-shrink: 0;
					margin-right: 10rpx;

					image {
						width: 128rpx;
						height: 128rpx;
					}
				}
				.info {
					width: 100%;
					height: 22vw;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					position: relative;

					.title {
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.spec {
						font-size: 22upx;
						background-color: #f3f3f3;
						color: #a7a7a7;
						height: 36upx;
						display: flex;
						align-items: center;
						padding: 0 10upx;
						border-radius: 20upx;
						margin-bottom: 20vw;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
				}
			}

			.br-peisong-style {
				margin-top: 20rpx;
				font-size: 32rpx;

				.brps-style {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.brps-list {
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.order {
		width: 92%;
		padding: 10upx 4%;
		margin: 30upx auto 20upx auto;
		background-color: #fff;

		.row {
			margin: 20upx 0;
			height: 40upx;
			display: flex;

			.left {
				font-size: 28upx;
			}

			.right {
				margin-left: 40upx;
				font-size: 26upx;
				color: #999;

				input {
					font-size: 26upx;
					color: #999;
				}
			}
		}
	}

	.blck {
		color: #232323;
		font-size: 28rpx;
		padding: 31rpx 31rpx 0;
		box-sizing: border-box;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		padding-bottom: 40upx;

		.select {
			border-bottom: 1px solid #D9D9D9;
			padding-bottom: 23rpx;
		}

		.row {
			width: 100%;
			height: 100upx;
			display: flex;
			align-items: center;

			.left {
				width: 100upx;
				flex-shrink: 0;
				display: flex;
				align-items: center;

				image {
					width: 80upx;
					height: 80upx;
				}
			}

			.center {
				width: 100%;
				font-size: 30upx;
			}

			.tips {
				display: flex;
				flex-direction: column;

				.tip {
					font-size: 24rpx;
					color: #726f6f;
				}
			}

			.right {
				width: 100upx;
				flex-shrink: 0;
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.footer {
		width: 100%;
		padding: 20rpx 40rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		position: fixed;
		bottom: 0;
		z-index: 5;
		
		.btn {
			width: 328rpx;
			height: 88rpx;
			background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
			box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(250,49,33,0.24);
			border-radius: 16rpx;
			font-size: 32rpx;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.detail {
		width: 92%;
		padding: 30rpx;
		margin: 20rpx auto 20rpx auto;
		background-color: #fff;

		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.fretips {
		width: 600rpx;
		height: 210rpx;
		text-align: center;

		.tips2 {
			background-color: #fff;
			padding: 30rpx 30rpx;
			width: 400rpx;
			border-radius: 10px;
			font-size: 28rpx;

			.tip_content {
				width: 100%;
				padding: 5px 5px 5px 0;
				line-height: 40rpx;
				white-space: wrap;
			}

			.btn {
				border-top: 1px solid #ccc;
				line-height: 70rpx;
				height: 40rpx;
			}
		}
	}
</style>